<template>
	<section>
		<h3 class="h3-component">
			<span class="h3">推荐</span>
		</h3>
		<div class="video-card-box--1">
			<!-- video-card -->
			<div class="video-card clear" v-for="item in res_data" :key="item.aid">
				<router-link class="video-link" :to="{path: `/channel/${item.menu_id}/${item.aid}`}" target="_blank">
					<div class="video-left left">
						<div class="video-view">
							<div class="video-img">
								<img :src="imgBaseUrl+item.pic" alt="" />
							</div>
						</div>
						<div class="video-from">
							<span :class="`icon-from icon-from-${item.pub_platform}`"></span>
							<span class="minutes">{{ item.minute }}</span>
						</div>
					</div>
					<div class="video-right right">
						<div class="title">{{item.title}}</div>
					</div>
				</router-link>
				<div class="video-click">
					<span :class="item.storeClass" @click="storeFn(item)">{{item.store_num}}</span>
					<span :class="item.good" @click="goodFn(item)">{{item.good_num}}</span>
				</div>
			</div>
			<!-- video-card -->
		</div>
	</section>
</template>

<script>
import { updategood, storefrontAdd, getmenurecommvideo, imgBaseUrl } from '@/api';
import { utilStore, utilGood } from '@/util/util'
import { mapState, mapMutations } from 'vuex'
export default {
	data() {
		return {
			// 界面展示
			res_data: [],
			imgBaseUrl,
			menu_id: null,
		}
	},
	watch: {
		'$route' (to, from) {
			// 对路由变化作出响应...
			this.getResData();
		}
	},
	computed: {
		...mapState([
			'userInfo',
			'login'
		]),
	},
	methods: {
		...mapMutations([
			'DIALOG_LOGIN',
		]),
		// 收藏 
		storeFn(item){
			utilStore(item, this, 'res_data', storefrontAdd);
		},
		goodFn(item){
			utilGood(item, this, 'res_data', updategood);
		},
		getResData (){
			this.menu_id = this.$route.params.menu_id || 11;
			let para = {
				menu_id: this.menu_id, // 暂定
				pagesize: 5,
				user_id: this.userInfo?this.userInfo.user_id:'',
			}
			getmenurecommvideo(para).then(res => {
				if(res.data){
					let data = res.data; 
					for(let i =0;i<data.length; i++){
						data[i].storeClass = data[i].store!=1?'icon-bg icon-store-o':'icon-bg icon-store';'icon-bg icon-store-o';
						data[i].good = 'icon-bg icon-good-o';
						data[i].goodcan = true;
					}
					this.res_data = data
				}else{

				}
			})
		},
	},
	mounted() {
		this.getResData();
	}
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
.video-card-box--1{
	.video-card {
		position: relative;
		top: 0;
		left: 0;
		margin-bottom: 15px;
		.video-left {
			position: relative;
			top: 0;
			left: 0;
			width: 145px;
			.video-view {
				width: 100%;
				height: 0;
				padding-bottom: 56.25%;
				overflow: hidden;
				.video-img {
					transition: all .2s linear;
					-webkit-transition: all .2s linear;
				}
			}
			.video-from {
				position: absolute;
				bottom: 6px;
				left: 5px;
				height: 16px; 
				line-height: 16px;
				font-size: 12px;
				.minutes { 
					color:#fff;
					vertical-align: middle;
					padding-left: 4px;
				}
			}
		}
		.video-left:hover {
			.video-img {
				-webkit-transform: scale(1.05);
				transform: scale(1.05);
			}
		}
		.video-right {
			width: 130px;
			.title {
				line-height: 23px;
				width: 100%;
				height: 46px;
				overflow: hidden;
			}
		}
		.video-click {
			position: absolute;
			bottom: 5px;
			left: 155px;
			font-size: 12px;
			z-index: 3;
			.icon-store-o{
				background-position: 0 -144px;
			}
			.icon-good-o{
				background-position: 0 -128px;
			}
			.icon-store,.icon-store-o:hover{
				background-position: 0 -48px;
			}
			.icon-good,.icon-good-o:hover {
				background-position: 0 -16px;
			}
		}
	}
	
}
</style>
